<template>
  <table cellspacing="0" cellpadding="0" border="0" :style="styles">
    <colgroup>
      <col v-for="(column, index) in columns" :width="setCellWidth(column)" :key="index">
      <col v-if="$parent.showVerticalScrollBar" :width="$parent.scrollBarWidth"/>
    </colgroup>
    <thead>
    <tr v-for="(cols, rowIndex) in headRows" :key="rowIndex">
      <th
        v-for="(column, index) in cols" :key="index"
        :colspan="column.colSpan"
        :rowspan="column.rowSpan"
        :class="alignCls(column)">
        <div :class="cellClasses(column)">
          <template v-if="column.type === 'expand'">
            <span v-if="!column.renderHeader">{{ column.title || '' }}</span>
            <oolongTableRenderHeader v-else :render="column.renderHeader" :column="column"
                                     :index="index"></oolongTableRenderHeader>
          </template>
          <template v-else-if="column.type === 'selection'">
            <oolongCheckbox :value="isSelectAll" :disabled="!data.length" @on-change="selectAll"></oolongCheckbox>
          </template>
          <template v-else>
            <span v-if="!column.renderHeader" :class="{[prefixCls + '-cell-sort']: column.sortable}"
                  @click="handleSortByHead(getColumn(rowIndex, index)._index)">{{ column.title || '#' }}</span>
            <oolongTableRenderHeader v-else :render="column.renderHeader" :column="column"
                                     :index="index"></oolongTableRenderHeader>
            <span :class="[prefixCls + '-sort']" v-if="column.sortable">
                                <i class="oolong-icon oolong-icon-arrow-up-b"
                                   :class="{on: getColumn(rowIndex, index)._sortType === 'asc'}"
                                   @click="handleSort(getColumn(rowIndex, index)._index, 'asc')"></i>
                                <i class="oolong-icon oolong-icon-arrow-down-b"
                                   :class="{on: getColumn(rowIndex, index)._sortType === 'desc'}"
                                   @click="handleSort(getColumn(rowIndex, index)._index, 'desc')"></i>
                            </span>
            <oolongPoptip
              v-if="isPopperShow(column)"
              :v-model="getColumn(rowIndex, index)._filterVisible"
              placement="bottom"
              popper-class="oolong-table-popper"
              transfer
              @on-popper-hide="handleFilterHide(getColumn(rowIndex, index)._index)">
                                <span :class="[prefixCls + '-filter']">
                                    <i class="oolong-icon oolong-icon-funnel"
                                       :class="{on: getColumn(rowIndex, index)._isFiltered}"></i>
                                </span>

              <div slot="content" :class="[prefixCls + '-filter-list']"
                   v-if="getColumn(rowIndex, index)._filterMultiple">
                <div :class="[prefixCls + '-filter-list-item']">
                  <oolongCheckboxGroup :v-model="getColumn(rowIndex, index)._filterChecked">
                    <oolongCheckbox v-for="(item, index) in column.filters" :key="index" :label="item.value">{{
                        item.label
                      }}
                    </oolongCheckbox>
                  </oolongCheckboxGroup>
                </div>
                <div :class="[prefixCls + '-filter-footer']">
                  <oolongButton type="text" size="small" :disabled="!getColumn(rowIndex, index)._filterChecked.length"
                                @click.native="handleFilter(getColumn(rowIndex, index)._index)">{{
                      t('i.table.confirmFilter')
                    }}
                  </oolongButton>
                  <oolongButton type="text" size="small" @click.native="handleReset(getColumn(rowIndex, index)._index)">
                    {{
                      t('i.table.resetFilter')
                    }}
                  </oolongButton>
                </div>
              </div>
              <div slot="content" :class="[prefixCls + '-filter-list']" v-else>
                <ul :class="[prefixCls + '-filter-list-single']">
                  <li
                    :class="itemAllClasses(getColumn(rowIndex, index))"
                    @click="handleReset(getColumn(rowIndex, index)._index)">{{ t('i.table.clearFilter') }}
                  </li>
                  <li
                    :class="itemClasses(getColumn(rowIndex, index), item)"
                    v-for="(item,index) in column.filters" :key="index"
                    @click="handleSelect(getColumn(rowIndex, index)._index, item.value)">{{ item.label }}
                  </li>
                </ul>
              </div>
            </oolongPoptip>
          </template>
        </div>
      </th>

      <th v-if="$parent.showVerticalScrollBar && rowIndex===0" :class='scrollBarCellClass()'
          :rowspan="headRows.length"></th>
    </tr>
    </thead>
  </table>
</template>
<script>
import oolongCheckboxGroup from '../checkbox/oolong-checkbox-group.vue';
import oolongCheckbox from '../checkbox/oolong-checkbox.vue';
import oolongPoptip from '../poptip/oolong-poptip.vue';
import oolongButton from '../button/oolong-button.vue';
import oolongTableRenderHeader from './oolong-table-render-header';
import Mixin from './mixin';
import Locale from '../../mixins/locale';

export default {
  name: 'oolongTableHead',
  mixins: [Mixin, Locale],
  components: {oolongCheckboxGroup, oolongCheckbox, oolongButton, oolongPoptip, oolongTableRenderHeader},
  props: {
    prefixCls: String,
    styleObject: Object,
    columns: Array,
    objData: Object,
    data: Array, // rebuildData
    columnsWidth: Object,
    fixed: {
      type: [Boolean, String],
      default: false
    },
    columnRows: Array,
    fixedColumnRows: Array
  },
  computed: {
    styles() {
      const style = Object.assign({}, this.styleObject);
      const width = parseInt(this.styleObject.width);
      style.width = `${width}px`;
      return style;
    },
    isSelectAll() {
      let isSelectAll = true;
      if (!this.data.length) isSelectAll = false;
      if (!this.data.find(item => !item._disabled)) isSelectAll = false;// #1751
      for (let i = 0; i < this.data.length; i++) {
        if (!this.objData[this.data[i]._index]._isChecked && !this.objData[this.data[i]._index]._isDisabled) {
          isSelectAll = false;
          break;
        }
      }

      return isSelectAll;
    },
    headRows() {
      const isGroup = this.columnRows.length > 1;
      if (isGroup) {
        return this.fixed ? this.fixedColumnRows : this.columnRows;
      } else {
        return [this.columns];
      }
    }
  },
  methods: {
    cellClasses(column) {
      return [
        `${this.prefixCls}-cell`,
        {
          [`${this.prefixCls}-hidden`]: !this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right')
        }
      ];
    },
    scrollBarCellClass() {
      let hasRightFixed = false;
      for (let i in this.headRows) {
        for (let j in this.headRows[i]) {
          if (this.headRows[i][j].fixed === 'right') {
            hasRightFixed = true;
            break;
          }
          if (hasRightFixed) break;
        }
      }
      return [
        {
          [`${this.prefixCls}-hidden`]: hasRightFixed
        }
      ];
    },
    itemClasses(column, item) {
      return [
        `${this.prefixCls}-filter-select-item`,
        {
          [`${this.prefixCls}-filter-select-item-selected`]: column._filterChecked[0] === item.value
        }
      ];
    },
    itemAllClasses(column) {
      return [
        `${this.prefixCls}-filter-select-item`,
        {
          [`${this.prefixCls}-filter-select-item-selected`]: !column._filterChecked.length
        }
      ];
    },
    selectAll() {
      const status = !this.isSelectAll;
      this.$parent.selectAll(status);
    },
    handleSort(index, type) {
      const column = this.columns[index];
      const _index = column._index;
      if (column._sortType === type) {
        type = 'normal';
      }
      this.$parent.handleSort(_index, type);
    },
    handleSortByHead(index) {
      const column = this.columns[index];
      if (column.sortable) {
        const type = column._sortType;
        if (type === 'normal') {
          this.handleSort(index, 'asc');
        } else if (type === 'asc') {
          this.handleSort(index, 'desc');
        } else {
          this.handleSort(index, 'normal');
        }
      }
    },
    handleFilter(index) {
      this.$parent.handleFilter(index);
    },
    handleSelect(index, value) {
      this.$parent.handleFilterSelect(index, value);
    },
    handleReset(index) {
      this.$parent.handleFilterReset(index);
    },
    handleFilterHide(index) {
      this.$parent.handleFilterHide(index);
    },
    // 因为表头嵌套不是深拷贝，所以没有 _ 开头的方法，在 isGroup 下用此列
    getColumn(rowIndex, index) {
      const isGroup = this.columnRows.length > 1;

      if (isGroup) {
        const id = this.headRows[rowIndex][index].__id;
        return this.columns.filter(item => item.__id === id)[0];
      } else {
        return this.headRows[rowIndex][index];
      }
    }
  }
};
</script>
